<template>
  <div class="home" :style="{ backgroundImage: pageBgUrl }">
    <header class="flex align-center justify-between">
      <i class="iconfont icon-gengduo" @click="goTo"></i>
      <p className="date">{{ weartherInfo.today }}</p>
      <i
        class="iconfont icon-refresh"
        :class="{ loading: isLoading }"
        @click="refresh"
      ></i>
    </header>
    <div className="flex-column align-center container">
      <p className="city">{{ weartherInfo.city }}</p>
      <img :src="weartherInfo.weatherimg" alt="" />
      <div className="flex align-center">
        <p className="temp">{{ weartherInfo.temp }}</p>
        <div>
          <p>°C</p>
          <p>{{ weartherInfo.weather }}</p>
        </div>
      </div>
      <div className="flex align-center wden">
        <img :src="weartherInfo.wdenimg" alt="" />
        <p>{{ weartherInfo.wd }}</p>
      </div>
      <p className="pm" :style="{ backgroundColor: getPMText.color }">
        <span>{{ air_now_city.aqi }}</span>
        {{ air_now_city.qlty }}
      </p>
      <div class="future-weather-box">
        <div
          class="future-weather-item"
          v-for="(item, $index) in daily_forecast"
          :key="$index"
        >
          <text class="title">{{ texts[$index] }}</text>
          <img
            :src="`https://apip.weatherdt.com/20200701/icon/c/${item.cond_code_d}d.png`"
            alt=""
          />
          <p>{{ item.tmp_min }}°/{{ item.tmp_max }}°</p>
          <p
            class="pm"
            :style="{ color: getPmColor(air_forecast[$index].aqi) }"
          >
            {{ air_forecast[$index].qlty }}
          </p>
        </div>
      </div>
    </div>
    <p class="uptime">更新时间：{{ weartherInfo.uptime }}</p>
  </div>
</template>

<script>
import { reactive, computed, toRefs, onActivated } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getWeatherList } from "../service/home";
import _ from "lodash";
export default {
  name: "Home",
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      isLoading: true,
      texts: ["今天", "明天", "后天"],
      daily_forecast: [],
      air_now_city: {},
      air_forecast: [],
      now_weather: {},
    });
    const PM = [
      { text: "优", pm: [0, 35], color: "#40c057" },
      { text: "良", pm: [35, 75], color: "#82c91e" },
      { text: "轻度污染", pm: [75, 115], color: "#f76707" },
      { text: "中度污染", pm: [115, 150], color: "#e03131" },
      { text: "重度污染", pm: [150, 250], color: "#841c3c" },
      { text: "严重污染", pm: [250, 0], color: "#841c3c" },
    ];

    onActivated(() => {
      init();
    });

    const getPMText = computed(() => {
      const pm = state.air_now_city.aqi;
      const result = _.filter(PM, (item) => {
        if (pm >= item.pm[0]) {
          if (item[1] === 0 || pm < item.pm[1]) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
      return result[0] || {};
    });

    const weartherInfo = computed(() => {
      return store.state.weartherInfo;
    });

    const _cityCode = computed(() => {
      let { cityCode = null } = router.currentRoute.value.params;
      if (cityCode) {
        return cityCode;
      } else {
        return store.state.postion.CityCode;
      }
    });

    const pageBgUrl = computed(() => {
      const { cond_code = "100" } = state.now_weather;
      return `url(https://apip.weatherdt.com/20200701/bg/view/${cond_code}d.png)`;
    });

    const init = async () => {
      state.isLoading = true;
      let { cityCode = null } = router.currentRoute.value.params;
      if (cityCode) {
        await store.dispatch("getWeatherInfo", { id: cityCode });
      } else {
        await store.dispatch("getWeatherInfoByPostion");
      }
      const weatherList = await getWeatherList(_cityCode.value);
      const { air_now_city, air_forecast, daily_forecast, now } = weatherList;
      state.air_now_city = air_now_city;
      state.air_forecast = air_forecast;
      state.daily_forecast = daily_forecast;
      state.now_weather = now;
      state.isLoading = false;
    };

    const goTo = () => {
      router.push({ name: "CityList" });
    };

    const refresh = async () => {
      state.isLoading = true;
      await store.dispatch("getWeatherInfo", { id: _cityCode.value });
      state.isLoading = false;
    };

    const getPmColor = (pm = null) => {
      if (pm == null) return "";
      pm = Number(pm);
      const result = _.filter(PM, (item) => {
        if (pm >= item.pm[0]) {
          if (item[1] === 0 || pm < item.pm[1]) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
      return result ? result[0].color : "";
    };

    return {
      ...toRefs(state),
      weartherInfo,
      getPMText,
      pageBgUrl,
      goTo,
      refresh,
      getPmColor,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100vw;
  height: 100vh;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
  background-size: 100% 100%;
  // transition: 2s linear;
  overflow: hidden;

  header {
    height: 45px;
    padding: 0 10px;
    .date {
      font-size: 18px;
    }
    i {
      font-size: 20px;
      &.loading {
        animation: roate 1.5s linear;
        animation-iteration-count: infinite;
      }
    }
  }
  .container {
    color: #ffffff;
    font-size: 20px;
    height: 100%;
    padding-top: 10%;
    box-sizing: border-box;

    .city {
      font-size: 40px;
    }

    .temp {
      font-size: 50px;
      margin-right: 10px;
    }

    .wden {
      font-size: 16px;
      margin: 20px 0;

      > img {
        width: 20px;
        margin-right: 10px;
      }
    }

    .pm {
      font-size: 16px;
      padding: 5px 10px;
      border-radius: 5px;

      > span {
        margin-right: 10px;
      }
    }

    .future-weather-box {
      width: 100%;
      display: flex;
      padding: 0 5px;
      margin-top: 20px;
      box-sizing: border-box;
      .future-weather-item {
        flex: 1;
        background-color: rgba($color: #ffffff, $alpha: 0.2);
        margin: 5px;
        border-radius: 5px;
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
          font-size: 20px;
        }
        img {
          width: 60px;
          height: 60px;
          margin: 10px 0;
        }
        .pm {
          font-size: 18px;
        }
      }
    }
  }

  .uptime {
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: 14px;
    width: 100%;
    text-align: center;
  }

  @keyframes roate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
